<!--车辆管理-->
<template>

    <div class="minW1060-auto bg-fff mt10">
        <div class="pad20 ml10">

            <!--搜索条件-->
            <el-row class="text-left">

                <el-col :span="13">
                    <div class="dlblock-mb20">
                        <span class="pr5">车牌号</span>
                        <el-input :maxlength="10" clearable placeholder="请输入车牌号" show-word-limit
                                  size="medium" style="width: 150px;" v-model.trim="query.no"></el-input>
                    </div>

                    <div class="dlblock-mb20">
                        <span class="pr5 ml10">自编号</span>
                        <el-input :maxlength="15" clearable placeholder="请输入自编号" show-word-limit
                                  size="medium" style="width: 150px;" v-model.trim="query.code"></el-input>
                    </div>

                    <div class="dlblock-mb20">
                        <span class="pr5 ml10">机构名</span>
                        <el-input :maxlength="15" clearable placeholder="请输入分组名"
                                  show-word-limit
                                  size="medium" style="width: 150px;" v-model.trim="query.groupName"></el-input>
                    </div>

                    <div class="dlblock-mb20 pr5 pl5">
                        <el-button @click="query.page = 1,queryVehicle()" circle class="el-icon-search ml5"></el-button>
                    </div>
                </el-col>

                <el-col :span="10 " align="right">
                    <div class="dlblock-mb20 pr10 ml20">
                        <router-link :to="{path: '/vehicle/edit'}">
                            <el-button type="primary">添加</el-button>
                        </router-link>
                    </div>
                    <div class="dlblock-mb20 pr10">
                        <el-button @click="deleteAll" type="danger">删除</el-button>
                    </div>
                    <div class="dlblock-mb20 pr10">
                        <el-button @click="downloadBtn()" type="primary">下载模板</el-button>
                    </div>
                    <div class="dlblock-mb20 pr10">
                        <el-upload
                                action="http://192.168.1.21:2563/api/web/taxi/ba/vehicle/importVehicles"
                                :auto-upload="false"
                                :on-preview="handlePreview"
                                :on-remove="handleRemove"
                                class="text-right"
                                name="file"
                                ref="upload">
                            <el-button size="medium" slot="trigger" type="primary">模板导入</el-button>
                            <el-button @click="submitUpload" size="medium" style="margin-left: 10px;" type="success">
                                确定导入
                            </el-button>
                        </el-upload>
                    </div>
                    <div class="dlblock-mb20 pr10">
                        <el-button @click="exportVehicle1" type="info">导出列表</el-button>
                    </div>

                </el-col>

            </el-row>

            <!--表格-->
            <el-row>
                <el-table
                        :data="vehicleList"
                        @selection-change="selectionchange"
                        border
                        class="my-table"
                        header-row-class-name="my-table-header" stripe
                        v-loading="loading"
                >

                    <el-table-column align="center" fixed type="selection" width="80">
                    </el-table-column>
                    <el-table-column align="center" label="机构名称" prop="groupName" width="100px"></el-table-column>
                    <el-table-column align="center" label="车牌号" prop="no" width="100"></el-table-column>
                    <el-table-column align="center" label="自编号" prop="code"></el-table-column>
                    <el-table-column align="center" label="车型" prop="code"></el-table-column>
                    <el-table-column align="center" label="颜色" prop="code"></el-table-column>
                    <el-table-column align="center" label="已安装设备" prop="code"></el-table-column>
                    <el-table-column align="center" label="注册日期" prop="code"></el-table-column>
                    <el-table-column align="center" label="是否停用" prop="code"></el-table-column>
                    <el-table-column align="center" label="运营类型" prop="code"></el-table-column>
                    <el-table-column align="center" label="车辆行驶证" prop="code"></el-table-column>
                    <el-table-column align="center" label="车辆运营证" prop="code"></el-table-column>
                    <el-table-column align="center" label="年检信息" prop="code"></el-table-column>
                    <el-table-column align="center" label="保险信息" prop="code"></el-table-column>
                    <el-table-column align="center" label="车主信息" prop="code"></el-table-column>
                    <el-table-column align="center" fixed="right" label="操作" width="150">
                        <template slot-scope="{row}">
                            <p>
                                <router-link :to="{path:'/vehicle/edit',query:{vehicle:row}}">
                                    <el-button style="color: #409eff" type="text">编辑</el-button>
                                </router-link>

                                <el-button @click="deleteOne(row.id)" style="color: #f56c6c" type="text">删除</el-button>
                            </p>
                        </template>
                    </el-table-column>
                </el-table>
            </el-row>
            <br>

            <!--分页控件-->
            <el-row :gutter="20">
                <el-col :offset="6" :span="12" align="center">
                    <el-pagination :current-page="query.pageNum" :page-size="query.pageSize" :total="query.total"
                                   @current-change="pageChange"
                                   background layout="total, prev, pager, next">
                    </el-pagination>
                </el-col>
            </el-row>

        </div>
    </div>

</template>

<script>

    import {deleteVehicle, getVehicleInfo} from '@/api';
    import {myDate1} from "../../../utils/common";
    // import {myDate1} from '@/utils/common.js'
    import config from '@/utils/config'


    export default {
        name: "index1",
        components: {},
        data() {
            return {
                config,
                //加载动画
                loading: false,

                //dialogExportVisible
                dialogExportVisible: false,

                //车辆列表
                vehicleList: [],

                //查询参数
                query: {
                    no: '',
                    code: '',
                    groupName: '',
                    routeName: '',
                    pageNum: 1,
                    pageSize: 18,
                    total: 0
                },

                //导出参数
                exportVehicleVal: {
                    fromPage: 1,
                    toPage: 1,
                },

                //多选id
                vehicleIds: [],

                //复选框 序号
                number: [],
                checked: false,

            }
        },
        watch: {
            'exportVehicleVal.fromPage': function (value) {
                let reg = /^[+]{0,1}(\d+)$/g;
                if (value == undefined || value == '') {

                } else if (!reg.test(value)) {
                    this.exportVehicleVal.fromPage = ''
                }
            },
            'exportVehicleVal.toPage': function (value) {
                let reg = /^[+]{0,1}(\d+)$/g;
                if (value == undefined || value == '') {

                } else if (!reg.test(value)) {
                    this.exportVehicleVal.toPage = ''
                }
            }
        },

        methods: {

            //车辆位置照片
            getVehicleLocation(row) {
                if (row.lng != null && row.lng != '' && row.lat != null && row.lat != '') {
                    return `http://api.map.baidu.com/staticimage/v2?ak=0MA953dkYQM4fQriWe6NaII8QpjeCCZh&width=200&height=100&center=${row.lng},${row.lat}&markers=${row.lng},${row.lat}&zoom=16&markerStyles=m,A,0xff0000`
                } else {
                    return require('../../../assets/imgs/nopoint.jpg')
                }
            },

            //车辆图片
            getImgUrl(imgUrl) {
                if (imgUrl != null && imgUrl != '') {
                    return `${window.gConfig.baseURL + imgUrl}`;
                }
                return require('../../../assets/imgs/vehicle_default.png')
            },

            //查询车辆
            queryVehicle1() {
                this.loading = true
                getVehicleInfo(this.query).then(res => {
                    if (res != null && res.code == 200) {
                        this.vehicleList = res.data.list;
                        this.query.total = res.data.count
                    }
                }).finally(() =>
                    this.loading = false
                )
            },

            queryVehicle() {
                this.loading = true
                getVehicleInfo({
                    pageNum: this.query.pageNum
                }).then(res => {
                    if (res != null && res.code == 200) {
                        this.vehicleList = res.data.list;
                        this.query.total = res.data.count
                    }
                }).finally(() =>
                    this.loading = false
                )
            },

            //导出车辆模板
            downloadBtn() {
                //文件下载
                let a = document.createElement('a')
                a.href = "http://192.168.1.21:2563/api/web/taxi/ba/vehicle/exportTemplate"
                a.click();
            },

            handlePreview(file) {
            },
            handleRemove(file, fileList) {
            },
            submitUpload() {
                this.$refs.upload.submit();
                this.$refs.upload.clearFiles();
            },

            //导出车辆
            exportVehicle1() {
                let a = document.createElement('a')
                a.href = "http://192.168.1.21:2563/api/web/taxi/ba/vehicle/exportVehicles?groupId=111"
                a.click();
            },

            //删除车辆
            deleteOne(data) {
                this.$confirm('删除后将释放已绑定设备, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    if (data != null) {
                        this.vehicleIds = []
                        this.vehicleIds.push(data)
                    }
                    deleteVehicle({ids: this.vehicleIds}).then(res => {
                        if (res.code == 200) {
                            this.$message({type: 'success', message: '删除成功'});
                            this.queryVehicle()
                        } else {
                            this.$message({type: 'error', message: '删除失败'});
                        }
                    })
                }).catch(() => {
                    this.$message({type: 'info', message: '已取消删除'});
                });
            },

            //车辆多选
            selectionchange(val) {
                this.vehicleIds = []
                val.forEach(x => {
                    this.vehicleIds.push(x.id)
                });
            },

            //删除全部
            deleteAll() {
                if (this.vehicleIds.length != 0) {
                    this.$confirm('删除后将释放已绑定设备, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        deleteVehicle({ids: this.vehicleIds}).then(res => {
                            if (res.code == 200) {
                                this.$message({type: 'success', message: '删除成功'});
                                this.queryVehicle()
                            } else {
                                this.$message({type: 'error', message: '删除失败'});
                            }
                        })
                    }).catch(() => {
                        this.$message({type: 'info', message: '已取消删除'});
                    });
                } else {
                    this.$message({type: 'error', message: '请先选择车辆'});
                }
            },

            // 分页查询
            pageChange(val) {
                this.query.pageNum = val
                this.queryVehicle()
            },

            //保险日期
            insuranceDate(str) {
                if (str.length == 4) {
                    return new Date().getFullYear() + '/' + str.substr(0, 2) + '/' + str.substr(2, 4)
                } else if (str.length == 3) {
                    return new Date().getFullYear() + '/0' + str.substr(0, 1) + '/' + str.substr(1, 3)
                } else {
                    return myDate1(new Date())
                }
            },
        },

        created() {
            this.queryVehicle()
        }

    }

</script>

<style scoped>
    .my-table /deep/ tr, .my-table /deep/ td {
        padding: 0 !important;
        height: 30px;
        line-height: 30px;
    }
</style>
